<template>
  <div>
    <!-- 图一 各地城市就业人数 -->
    <div class="get_a_job_box">
      <!-- 标题 -->
      <TitleBar> 各地市培训完成人数 </TitleBar>
      <!-- 图一  -->
      <div class="tableB">
        <!-- 标题 -->
        <div class="tableLine">
          <div></div>
          <div>地区</div>
          <div>培训计划数</div>
          <div>完成比例</div>
        </div>
        <!-- 主体 -->
        <div class="tableBody">
          <div class="tableLineB" v-for="(_, index) in Array.apply(1, Array(5))" :key="index">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
          </div>
          <div class="scrollText" style="top: 0">
            <div style="position: relative">
              <div v-for="(item, index) in [...training_data, ...training_data]" :key="index" :class="
                totalScrollNum == index
                  ? 'tableLineC tableLineCA'
                  : 'tableLineC'
              ">
                <div>
                  <div class="tableNo">{{ item.no }}</div>
                </div>
                <div>{{ item.area }}</div>
                <div>{{ item.planNum }}</div>
                <div>{{ item.finish }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--图二 参加培训情况 -->
    <div class="cultivate_box">
      <TitleBar> 参加培训情况 </TitleBar>
      <div ref="basicDataPie" style="width: 350px; height: 180px; z-index: 1;"></div>
      <!-- 北京底座 -->
      <div style="position: relative;">
        <!-- <img class="per-img" style="z-index: 10;" src="@/assets/images/clk5deEJq_1600742953704_rxYsiX3ZJj (4).webp"
          alt=""> -->
      </div>
    </div>
    <!-- 图三 热门就业行业  -->
    <div class="hot_industry_box">
      <TitleBar> 热门就业行业 </TitleBar>
      <div style="width: 350px; height: 200px" ref="buble"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-gl";
import TitleBar from '@/components/TitleBar.vue'
import axios from '@/api/Interceptor.js'
import EventBus from "@/util/event-bus.js";
export default {
  name: "LeftBar",
  data() {
    return {
      // 地区切换 
      selected_area: '',
      // 图一
      training_data: [
        {
          no: 1,
          area: "丽水",
          planNum: "32",
          finish: "75%",
        },
        {
          no: 2,
          area: "台州",
          planNum: "32",
          finish: "75%",
        },
        {
          no: 3,
          area: "丽水",
          planNum: "60",
          finish: "35%",
        },
        {
          no: 4,
          area: "湖州",
          planNum: "37",
          finish: "70%",
        },
        {
          no: 5,
          area: "衡州",
          planNum: "20",
          finish: "2%",
        },
        {
          no: 6,
          area: "夏威夷",
          planNum: "10",
          finish: "25.9%",
        },
        {
          no: 6,
          area: "夏威夷",
          planNum: "10",
          finish: "25.9%",
        },
        {
          no: 6,
          area: "夏威夷",
          planNum: "10",
          finish: "25.9%",
        },
      ],
      timmer: null,
      totalScrollNum: 0,
      // 滚动高度 
      scrollText: '',
      
      // 图二数据 
      cultivate_data: [
        { value: 299, name: "转业士兵" },
        { value: 1048, name: "退役士兵" }
        // { name: "视频", value: 20, itemStyle: { color: "#0783FA" } },
        // { name: "作业", value: 18, itemStyle: { color: "#07D1FA" } },
        // { name: "考试", value: 22, itemStyle: { color: "#20E6A4" } },
        // { name: "课件", value: 15, itemStyle: { color: "#D18161" } },
        // { name: "实验", value: 25, itemStyle: { color: "#FFE649" } },
      ],
      myChart: null,
      
      cultivate_timmer : null,

      // 图三 
   
      buble_data: [
        { name: 'css', value: 200 },
        { name: 'html', value: 300 },
        { name: 'python', value: 300 }
      ],
      buble_echarts: null,
    };
  },
  components: { TitleBar },
  mounted() {
    this.$nextTick(() => {
      // 图一
      // setTimeout(() => {
      this.startTimmer();
      // }, 500);

      // 图二
      this.echartsPie(this.cultivate_data);
      // 图三
      this.echartsBubbleDiagram();

    });

    // 地区监听接收消息
    EventBus.$on("selected_area", (selected_area) => {
      this.selected_area = selected_area
    });
  },
  methods: {
    // 图一
    startTimmer() {
      this.scrollText = document.querySelector(".scrollText");
      let timmer1

      if (this.timmer) {
        clearInterval(this.timmer);
      }
      this.timmer = setInterval(() => {
        if (this.scrollText) {
          this.scrollText.style.top = Number(this.scrollText.style.top.split("px")[0]) - 1 + "px";
        }

        if (Number(this.scrollText.style.top.split("px")[0]) <= -204) {
          this.scrollText.style.top = "0px";
        }
        if (!(Number(this.scrollText.style.top.split("px")[0]) % 34)) {
          clearInterval(this.timmer);
          this.totalScrollNum = -(
            Number(this.scrollText.style.top.split("px")[0]) / 34
          );
          timmer1 = setTimeout(() => {
            // clearInterval(timmer1);
            if (this.timmer) {
              clearInterval(this.timmer);
            }

            this.startTimmer();
          }, 500);
        }
      }, 50);
    },

    // 图二
    echartsPie() {
      let hoveredIndex = 0;
      let chartDom = this.$refs.basicDataPie;
      this.myChart = echarts.init(chartDom);
      // let _this = this

      const getPie3D = (pieData, internalDiameterRatio) => {
        //internalDiameterRatio:透明的空心占比
        let series = [];
        let sumValue = 0;
        let startValue = 0;
        let endValue = 0;
        let k = 1;
        pieData.sort((a, b) => {
          return b.value - a.value;
        });
        // 为每一个饼图数据，生成一个 series-surface 配置
        for (let i = 0; i < pieData.length; i++) {
          sumValue += pieData[i].value;
          let seriesItem = {
            name:
              typeof pieData[i].name === "undefined"
                ? `series${i}`
                : pieData[i].name,
            type: "surface",
            parametric: true,
            wireframe: {
              show: false,
            },
            pieData: pieData[i],
            pieStatus: {
              selected: false,
              hovered: false,
              k: k,
            },
            radius: "50%",
            center: ["10%", "10%"],
          };

          if (typeof pieData[i].itemStyle != "undefined") {
            let itemStyle = {};
            typeof pieData[i].itemStyle.color != "undefined"
              ? (itemStyle.color = pieData[i].itemStyle.color)
              : null;
            typeof pieData[i].itemStyle.opacity != "undefined"
              ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
              : null;
            seriesItem.itemStyle = itemStyle;
          }
          series.push(seriesItem);
        }

        // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
        // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
        for (let i = 0; i < series.length; i++) {
          endValue = startValue + series[i].pieData.value;
          series[i].pieData.startRatio = startValue / sumValue;
          series[i].pieData.endRatio = endValue / sumValue;
          series[i].parametricEquation = getParametricEquation(
            series[i].pieData.startRatio,
            series[i].pieData.endRatio,
            false,
            false,
            k,
            series[i].pieData.value
          );
          startValue = endValue;
        }
        let boxHeight = getHeight3D(series, 40); //通过传参设定3d饼/环的高度，26代表26px
        // 准备待返回的配置项，把准备好的 legendData、series 传入。
        let option = {
          // backgroundColor: "rgba($color: #4c4e4d, $alpha: 0.1)",

          // tooltip: {
          //   backgroundColor: "#fff",
          //   formatter: (params) => {
          //     if (
          //       params.seriesName !== "mouseoutSeries" &&
          //       params.seriesName !== "pie3d"
          //     ) {
          //       let bfb = (
          //         (option.series[params.seriesIndex].pieData.endRatio -
          //           option.series[params.seriesIndex].pieData.startRatio) *
          //         100
          //       ).toFixed(2);
          //       return (
          //         `${params.seriesName}<br/>` +
          //         `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
          //         `${bfb}%`
          //       );
          //     }
          //   },
          // },
          legend: {
            orient: "vertical", //图例的显示方式  默认横向显示 horizontal  vertical
            itemGap: 20,
            bottom: 60, //控制图例出现的距离  默认左上角
            right: 40,
            itemWidth: 5, //图例颜色块的宽度和高度
            itemHeight: 5,
            icon: "rect", // 图例前的图标为方点
            textStyle: {
              //图例中文字的样式
              color: "#fff",
              fontSize: 12,
              // fontWeight: '600',
            },
            padding: [0, 0, 0, 4], // 修改文字和图标距离
            formatter: e => {
              return `${e}`
            },
            // icon: "path://M0,12L12,12C12,5.37258,6.62742,0,0,0L0,12Z",
          },
          // title: {
          //   text: "课程总课时：68",
          //   left: "left",
          //   top: "2%",
          //   textStyle: {
          //     fontWeight: 500,
          //     fontSize: 16,
          //     color: "#3D3D3D",
          //   },
          // },
          xAxis3D: {
            min: -1,
            max: 1,
          },
          yAxis3D: {
            min: -1,
            max: 1,
          },
          zAxis3D: {
            min: -1,
            max: 1,
          },
          grid3D: {
            show: false,
            boxHeight: '0.7', //圆环的高度
            //3d饼图的位置
            left: -20,
            top: 0,
            viewControl: {
              // 3d效果可以放大、旋转等，请自己去查看官方配置
              alpha: 35, //角度
              distance: 400, //调整视角到主体的距离，类似调整zoom
              rotateSensitivity: 0, //设置为0无法旋转
              zoomSensitivity: 0, //设置为0无法缩放
              panSensitivity: 0, //设置为0无法平移
              // autoRotate: true, //自动旋转
            },
          },
          series: series
        };
        return option;
      };

      //获取3d丙图的最高扇区的高度
      const getHeight3D = (series, height) => {
        series.sort((a, b) => {
          return b.pieData.value - a.pieData.value;
        });
        return (height * 15) / series[0].pieData.value;
      };

      // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
      const getParametricEquation = (
        startRatio,
        endRatio,
        isSelected,
        isHovered,
        k,
        h
      ) => {
        // 计算
        let midRatio = (startRatio + endRatio) / 2;
        let startRadian = startRatio * Math.PI * 2;
        let endRadian = endRatio * Math.PI * 2;
        let midRadian = midRatio * Math.PI * 2;
        // 如果只有一个扇形，则不实现选中效果。
        if (startRatio === 0 && endRatio === 1) {
          isSelected = false;
        }
        // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
        k = typeof k !== "undefined" ? k : 1 / 3;
        // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
        let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
        let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
        // 计算高亮效果的放大比例（未高亮，则比例为 1）
        let hoverRate = isHovered ? 1.05 : 1;
        // 返回曲面参数方程
        return {
          u: {
            min: -Math.PI,
            max: Math.PI * 3,
            step: Math.PI / 32,
          },
          v: {
            min: 0,
            max: Math.PI * 2,
            step: Math.PI / 20,
          },
          x: function (u, v) {
            if (u < startRadian) {
              return (
                offsetX +
                Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetX +
                Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
          },
          y: function (u, v) {
            if (u < startRadian) {
              return (
                offsetY +
                Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            if (u > endRadian) {
              return (
                offsetY +
                Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
              );
            }
            return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
          },
          z: function (u, v) {
            if (u < -Math.PI * 0.5) {
              return Math.sin(u);
            }
            if (u > Math.PI * 2.5) {
              return Math.sin(u) * h * 0.1;
            }
            return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
          },
        };
      };

      let option = getPie3D(this.cultivate_data, 0.8);
      //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
      option.series.push({
        // name: "pie3d",
        type: "pie",
        label: {
          show: false,
          position: "inside",
          formatter: "{c}%",
        },
        // startAngle: -25, //起始角度，支持范围[0, 360]。
        clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
        radius: ["65%", "65%"],
        center: ["55%", "58%"], //指示线的位置
        itemStyle: {
          opacity: 0,
        },
      });
      option && this.myChart.setOption(option);

      // this.myChart.on("mouseover", function (params) {
      //   console.log(params, 448);
      //   // 准备重新渲染扇形所需的参数
      //   let isSelected;
      //   let isHovered;
      //   let startRatio;
      //   let endRatio;
      //   let k;
      //   let i;
      //   console.log(hoveredIndex, 475);
      //   // 如果触发 mouseover 的扇形当前已高亮，则不做操作
      //   if (hoveredIndex === params.seriesIndex) {
      //     return;

      //     // 否则进行高亮及必要的取消高亮操作
      //   } else {
      //     // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
      //     if (hoveredIndex !== "") {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
      //       isSelected = option.series[hoveredIndex].pieStatus.selected;
      //       isHovered = false;
      //       startRatio = option.series[hoveredIndex].pieData.startRatio;
      //       endRatio = option.series[hoveredIndex].pieData.endRatio;
      //       k = option.series[hoveredIndex].pieStatus.k;
      //       i =
      //         option.series[hoveredIndex].pieData.value ===
      //           option.series[0].pieData.value
      //           ? 35
      //           : 10;
      //       // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      //       option.series[hoveredIndex].parametricEquation =
      //         getParametricEquation(
      //           startRatio,
      //           endRatio,
      //           isSelected,
      //           isHovered,
      //           k,
      //           i
      //         );
      //       option.series[hoveredIndex].pieStatus.hovered = isHovered;

      //       // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      //       hoveredIndex = "";
      //     }

      //     // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
      //     if (
      //       params.seriesName !== "mouseoutSeries" &&
      //       option.series[params.seriesIndex].pieStatus
      //     ) {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      //       isSelected = option.series[params.seriesIndex].pieStatus.selected;
      //       isHovered = true;
      //       startRatio = option.series[params.seriesIndex].pieData.startRatio;
      //       endRatio = option.series[params.seriesIndex].pieData.endRatio;
      //       k = option.series[params.seriesIndex].pieStatus.k;

      //       // 对当前点击的扇形，执行高亮操作（对 option 更新）
      //       option.series[params.seriesIndex].parametricEquation =
      //         getParametricEquation(
      //           startRatio,
      //           endRatio,
      //           isSelected,
      //           isHovered,
      //           k,
      //           option.series[params.seriesIndex].pieData.value + 5
      //         );
      //       option.series[params.seriesIndex].pieStatus.hovered = isHovered;

      //       // 记录上次高亮的扇形对应的系列号 seriesIndex
      //       hoveredIndex = params.seriesIndex;
      //     }

      //     // 使用更新后的 option，渲染图表
      //     _this.myChart.setOption(option);
      //   }
      // });



      const highLight = (params) => {
        // 准备重新渲染扇形所需的参数
        let isSelected;
        let isHovered;
        let startRatio;
        let endRatio;
        let k;
        let i;
        console.log(hoveredIndex, 475);
        // 如果触发 mouseover 的扇形当前已高亮，则不做操作
        // if (hoveredIndex === params.seriesIndex) {
        //   return;

        //   // 否则进行高亮及必要的取消高亮操作
        // } else {
        // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
        if (hoveredIndex !== "") {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
          isSelected = option.series[hoveredIndex].pieStatus.selected;
          isHovered = false;
          startRatio = option.series[hoveredIndex].pieData.startRatio;
          endRatio = option.series[hoveredIndex].pieData.endRatio;
          k = option.series[hoveredIndex].pieStatus.k;
          i =
            option.series[hoveredIndex].pieData.value ===
              option.series[0].pieData.value
              ? 35
              : 10;
          // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
          option.series[hoveredIndex].parametricEquation =
            getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              i
            );
          option.series[hoveredIndex].pieStatus.hovered = isHovered;

          // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
          hoveredIndex = "";
        }

        // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
        if (
          params.seriesName !== "mouseoutSeries" &&
          option.series[params.seriesIndex].pieStatus
        ) {
          // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
          isSelected = option.series[params.seriesIndex].pieStatus.selected;
          isHovered = true;
          startRatio = option.series[params.seriesIndex].pieData.startRatio;
          endRatio = option.series[params.seriesIndex].pieData.endRatio;
          k = option.series[params.seriesIndex].pieStatus.k;

          // 对当前点击的扇形，执行高亮操作（对 option 更新）
          option.series[params.seriesIndex].parametricEquation =
            getParametricEquation(
              startRatio,
              endRatio,
              isSelected,
              isHovered,
              k,
              option.series[params.seriesIndex].pieData.value + 5
            );
          option.series[params.seriesIndex].pieStatus.hovered = isHovered;

          // 记录上次高亮的扇形对应的系列号 seriesIndex
          hoveredIndex = params.seriesIndex;
        }

        // 使用更新后的 option，渲染图表
        this.myChart.setOption(option);
        // }
      };






      const pipeAnimation = async () => {
        let curIndex = 0 ;
        if ( this.cultivate_timmer ) {
          clearInterval( this.cultivate_timmer)
        }
        this.cultivate_timmer = setInterval(() => {
          curIndex = curIndex + 1
          if (curIndex === 2) curIndex = 0
          highLight({
            seriesIndex: curIndex,
            seriesName: 'test'
          })
        }, 3000);
      };


      pipeAnimation()


    },

    // echartsPie(pieData) {
    //   let hoveredIndex = "";
    //   let chartDom = this.$refs["basicDataPie"];
    //   let myChart = echarts.init(chartDom);
    //   const getPie3D = (pieData, internalDiameterRatio) => {
    //     //internalDiameterRatio:透明的空心占比
    //     let series = [];
    //     let sumValue = 0;
    //     let startValue = 0;
    //     let endValue = 0;
    //     let k = 1;
    //     pieData.sort((a, b) => {
    //       return b.value - a.value;
    //     });
    //     // 为每一个饼图数据，生成一个 series-surface 配置
    //     for (let i = 0; i < pieData.length; i++) {
    //       sumValue += pieData[i].value;
    //       let seriesItem = {
    //         name:
    //           typeof pieData[i].name === "undefined"
    //             ? `series${i}`
    //             : pieData[i].name,
    //         type: "surface",
    //         parametric: true,
    //         wireframe: {
    //           show: false,
    //         },
    //         pieData: pieData[i],
    //         pieStatus: {
    //           selected: false,
    //           hovered: false,
    //           k: k,
    //         },
    //         radius: "50%",
    //         center: ["10%", "10%"],
    //       };

    //       if (typeof pieData[i].itemStyle != "undefined") {
    //         let itemStyle = {};
    //         typeof pieData[i].itemStyle.color != "undefined"
    //           ? (itemStyle.color = pieData[i].itemStyle.color)
    //           : null;
    //         typeof pieData[i].itemStyle.opacity != "undefined"
    //           ? (itemStyle.opacity = pieData[i].itemStyle.opacity)
    //           : null;
    //         seriesItem.itemStyle = itemStyle;
    //       }
    //       series.push(seriesItem);
    //     }

    //     // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
    //     // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
    //     for (let i = 0; i < series.length; i++) {
    //       endValue = startValue + series[i].pieData.value;
    //       series[i].pieData.startRatio = startValue / sumValue;
    //       series[i].pieData.endRatio = endValue / sumValue;
    //       series[i].parametricEquation = getParametricEquation(
    //         series[i].pieData.startRatio,
    //         series[i].pieData.endRatio,
    //         false,
    //         false,
    //         k,
    //         series[i].pieData.value
    //       );
    //       startValue = endValue;
    //     }
    //     let boxHeight = getHeight3D(series, 15); //通过传参设定3d饼/环的高度，26代表26px
    //     // 准备待返回的配置项，把准备好的 legendData、series 传入。
    //     let option = {
    //       backgroundColor: "#fff",
    //       tooltip: {
    //         backgroundColor: "#fff",
    //         formatter: (params) => {
    //           if (
    //             params.seriesName !== "mouseoutSeries" &&
    //             params.seriesName !== "pie3d"
    //           ) {
    //             let bfb = (
    //               (option.series[params.seriesIndex].pieData.endRatio -
    //                 option.series[params.seriesIndex].pieData.startRatio) *
    //               100
    //             ).toFixed(2);
    //             return (
    //               `${params.seriesName}<br/>` +
    //               `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>` +
    //               `${bfb}%`
    //             );
    //           }
    //         },
    //       },
    //       legend: {
    //         bottom: "3%",
    //         itemGap: 20,
    //         icon: "path://M0,12L12,12C12,5.37258,6.62742,0,0,0L0,12Z",
    //       },
    //       title: {
    //         text: "课程总课时：68",
    //         left: "left",
    //         top: "2%",
    //         textStyle: {
    //           fontWeight: 500,
    //           fontSize: 16,
    //           color: "#3D3D3D",
    //         },
    //       },
    //       xAxis3D: {
    //         min: -1,
    //         max: 1,
    //       },
    //       yAxis3D: {
    //         min: -1,
    //         max: 1,
    //       },
    //       zAxis3D: {
    //         min: -1,
    //         max: 1,
    //       },
    //       grid3D: {
    //         show: false,
    //         boxHeight: boxHeight, //圆环的高度
    //         left: 0,
    //         top: 0, //3d饼图的位置
    //         viewControl: {
    //           //3d效果可以放大、旋转等，请自己去查看官方配置
    //           alpha: 25, //角度
    //           distance: 250, //调整视角到主体的距离，类似调整zoom
    //           rotateSensitivity: 0, //设置为0无法旋转
    //           zoomSensitivity: 0, //设置为0无法缩放
    //           panSensitivity: 0, //设置为0无法平移
    //           autoRotate: true, //自动旋转
    //         },
    //       },
    //       series: series,
    //     };
    //     return option;
    //   };

    //   //获取3d丙图的最高扇区的高度
    //   const getHeight3D = (series, height) => {
    //     series.sort((a, b) => {
    //       return b.pieData.value - a.pieData.value;
    //     });
    //     return (height * 15) / series[0].pieData.value;
    //   };

    //   // 生成扇形的曲面参数方程，用于 series-surface.parametricEquation
    //   const getParametricEquation = (
    //     startRatio,
    //     endRatio,
    //     isSelected,
    //     isHovered,
    //     k,
    //     h
    //   ) => {
    //     // 计算
    //     let midRatio = (startRatio + endRatio) / 2;
    //     let startRadian = startRatio * Math.PI * 2;
    //     let endRadian = endRatio * Math.PI * 2;
    //     let midRadian = midRatio * Math.PI * 2;
    //     // 如果只有一个扇形，则不实现选中效果。
    //     if (startRatio === 0 && endRatio === 1) {
    //       isSelected = false;
    //     }
    //     // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
    //     k = typeof k !== "undefined" ? k : 1 / 3;
    //     // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
    //     let offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
    //     let offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;
    //     // 计算高亮效果的放大比例（未高亮，则比例为 1）
    //     let hoverRate = isHovered ? 1.05 : 1;
    //     // 返回曲面参数方程
    //     return {
    //       u: {
    //         min: -Math.PI,
    //         max: Math.PI * 3,
    //         step: Math.PI / 32,
    //       },
    //       v: {
    //         min: 0,
    //         max: Math.PI * 2,
    //         step: Math.PI / 20,
    //       },
    //       x: function (u, v) {
    //         if (u < startRadian) {
    //           return (
    //             offsetX +
    //             Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate
    //           );
    //         }
    //         if (u > endRadian) {
    //           return (
    //             offsetX +
    //             Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate
    //           );
    //         }
    //         return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
    //       },
    //       y: function (u, v) {
    //         if (u < startRadian) {
    //           return (
    //             offsetY +
    //             Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate
    //           );
    //         }
    //         if (u > endRadian) {
    //           return (
    //             offsetY +
    //             Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate
    //           );
    //         }
    //         return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
    //       },
    //       z: function (u, v) {
    //         if (u < -Math.PI * 0.5) {
    //           return Math.sin(u);
    //         }
    //         if (u > Math.PI * 2.5) {
    //           return Math.sin(u) * h * 0.1;
    //         }
    //         return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
    //       },
    //     };
    //   };

    //   let option = getPie3D(pieData, 0.8);
    //   //是否需要label指引线，如果要就添加一个透明的2d饼状图并调整角度使得labelLine和3d的饼状图对齐，并再次setOption
    //   option.series.push({
    //     // name: "pie3d",
    //     type: "pie",
    //     label: {
    //       show: false,
    //       position: "inside",
    //       formatter: "{c}%",
    //     },
    //     // startAngle: -25, //起始角度，支持范围[0, 360]。
    //     clockwise: false, //饼图的扇区是否是顺时针排布。上述这两项配置主要是为了对齐3d的样式
    //     radius: ["65%", "65%"],
    //     center: ["55%", "48%"], //指示线的位置
    //     itemStyle: {
    //       opacity: 0,
    //     },
    //   });
    //   option && myChart.setOption(option);

    //   myChart.on("mouseover", function (params) {
    //     // 准备重新渲染扇形所需的参数
    //     let isSelected;
    //     let isHovered;
    //     let startRatio;
    //     let endRatio;
    //     let k;
    //     let i;

    //     // 如果触发 mouseover 的扇形当前已高亮，则不做操作
    //     if (hoveredIndex === params.seriesIndex) {
    //       return;

    //       // 否则进行高亮及必要的取消高亮操作
    //     } else {
    //       // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
    //       if (hoveredIndex !== "") {
    //         // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
    //         isSelected = option.series[hoveredIndex].pieStatus.selected;
    //         isHovered = false;
    //         startRatio = option.series[hoveredIndex].pieData.startRatio;
    //         endRatio = option.series[hoveredIndex].pieData.endRatio;
    //         k = option.series[hoveredIndex].pieStatus.k;
    //         i =
    //           option.series[hoveredIndex].pieData.value ===
    //           option.series[0].pieData.value
    //             ? 35
    //             : 10;
    //         // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
    //         option.series[hoveredIndex].parametricEquation =
    //           getParametricEquation(
    //             startRatio,
    //             endRatio,
    //             isSelected,
    //             isHovered,
    //             k,
    //             i
    //           );
    //         option.series[hoveredIndex].pieStatus.hovered = isHovered;

    //         // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
    //         hoveredIndex = "";
    //       }

    //       // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
    //       if (
    //         params.seriesName !== "mouseoutSeries" &&
    //         option.series[params.seriesIndex].pieStatus
    //       ) {
    //         // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
    //         isSelected = option.series[params.seriesIndex].pieStatus.selected;
    //         isHovered = true;
    //         startRatio = option.series[params.seriesIndex].pieData.startRatio;
    //         endRatio = option.series[params.seriesIndex].pieData.endRatio;
    //         k = option.series[params.seriesIndex].pieStatus.k;

    //         // 对当前点击的扇形，执行高亮操作（对 option 更新）
    //         option.series[params.seriesIndex].parametricEquation =
    //           getParametricEquation(
    //             startRatio,
    //             endRatio,
    //             isSelected,
    //             isHovered,
    //             k,
    //             option.series[params.seriesIndex].pieData.value + 5
    //           );
    //         option.series[params.seriesIndex].pieStatus.hovered = isHovered;

    //         // 记录上次高亮的扇形对应的系列号 seriesIndex
    //         hoveredIndex = params.seriesIndex;
    //       }

    //       // 使用更新后的 option，渲染图表
    //       myChart.setOption(option);
    //     }
    //   });





    // },

    // 图三
    echartsBubbleDiagram() {
      this.buble_echarts = echarts.init(this.$refs.buble)
      this.setOptions(this.buble_data)
    },

    // 绘制气泡图图片 
    setOptions(data = []) {
      let [maxValue, temp] = [0, []]
      data.forEach((item) => {
        temp.push(item.value)
      })
      maxValue = Math.max.apply(null, temp)
      // 气泡颜色数组
      const color = ['#FAC858', '#FACD91', '#516CC0', '#EE6666', '#73C0DE', '#C280FF', '#91CC75', '#ff7123', '#ffc400', '#5e333f']
      // 气泡颜色备份
      let bakeColor = [...color]
      // 气泡数据
      const bubbleData = []
      // 气泡基础大小
      let basicSize = 35
      // 节点之间的斥力因子,值越大,气泡间距越大
      let repulsion = 180
      // 根据气泡数量配置基础大小和斥力因子（以实际情况进行适当调整，使气泡合理分布）
      if (data.length >= 5 && data.length < 10) {
        basicSize = 50
        repulsion = 230
      }
      if (data.length >= 10 && data.length < 20) {
        basicSize = 40
        repulsion = 150
      } else if (data.length >= 20) {
        basicSize = 30
        repulsion = 75
      }
      // 填充气泡数据数组bubbleData
      for (const item of data) {
        // 确保气泡数据条数少于或等于气泡颜色数组大小时，气泡颜色不重复
        if (!bakeColor.length) bakeColor = [...color]
        const colorSet = new Set(bakeColor)
        const curIndex = Math.round(Math.random() * (colorSet.size - 1))
        const curColor = bakeColor[curIndex]
        colorSet.delete(curColor)
        bakeColor = [...colorSet]
        // 气泡大小设置
        let size = (item.value * basicSize * 2) / maxValue
        if (size < basicSize) size = basicSize
        bubbleData.push({
          name: item.name,
          value: item.value,
          symbolSize: size,
          draggable: true,
          itemStyle: {
            normal: { color: curColor },
          },
        })
      }
      const bubbleOptions = {
        backgroundColor: 'rgba(245,242,242,0)',
        animationEasingUpdate: 'bounceIn',
        series: [
          {
            type: 'graph',
            layout: 'force',
            force: {
              repulsion: repulsion,
              edgeLength: 10,
            },
            // 是否开启鼠标缩放和平移漫游
            roam: false,
            label: { normal: { show: true } },
            data: bubbleData,
          },
        ],
      }
      this.buble_echarts.setOption(bubbleOptions)
    },
  },
  watch: {
    selected_area: {
      handler(newValue, oldValue) {  //newValue 新的值，oldValue变化前的值
        // 图1 
        this.training_data = [
          {
            no: 1,
            area: "长春1",
            planNum: "32",
            finish: "75%",
          },
          {
            no: 2,
            area: "吉林3",
            planNum: "32",
            finish: "75%",
          },
          {
            no: 3,
            area: "松原3",
            planNum: "60",
            finish: "35%",
          },
          {
            no: 4,
            area: "杨树林4",
            planNum: "37",
            finish: "70%",
          },
          {
            no: 5,
            area: "农安5",
            planNum: "20",
            finish: "2%",
          },
          {
            no: 6,
            area: "望京6",
            planNum: "10",
            finish: "25.9%",
          }
        ];
        this.totalScrollNum = 0
        // 滚动高度 
        this.scrollText.style.top = 0
        this.startTimmer()
        
        // 图二
        this.myChart.dispose();
        
        this.cultivate_data = [
        { value: 699, name: "视频" },
        { value: 700, name: "作业" }

      ],
        this.echartsPie()

        // 图三
        this.buble_echarts.dispose();
        this.buble_data = [
          { name: 'html', value: 100 },
          { name: 'python', value: 300 }
        ];
        this.echartsBubbleDiagram()



        // this.get_a_job_data = {
        //   Xdata: [4261, 3508, 2005, 3008, 300, 400],
        //   Ydata: ['No.1  长春', 'No.2  吉林', 'No.3  农安', 'No.4  四平', 'No.5  榆树', 'No.6  北湖']
        // }
        // // 图一 
        // this.get_a_jobchart_echart.dispose()
        // this.init_get_a_job(this.get_a_job_data)

        // // 图二 
        // this.retirement_data = [
        //   { value: 1084, name: '吃饭' },
        //   { value: 1048, name: '睡觉' }
        // ]
        // this.retirement_chart.dispose()
        // this.init_retirement(this.retirement_data)

        // // 图三 
        // this.hot_city_chart.dispose()

        // this.hot_city_data = {
        //   Xdata: [4261, 3508, 2005, 3008, 300],
        //   Ydata: ['No.1  长春', 'No.2  吉林', 'No.3  农安', 'No.4  四平', 'No.5  榆树']
        // }
        // this.init_hot_city(this.hot_city_data)
      },


      // immediate:true



    },
  }



};
</script>

<style lang="scss" scoped>
// 图一
.tableB {
  background-color: black;
  width: 350px;
  height: 180px;
}

.tableLine {
  display: flex;
}

// 表头
.tableLine>div {
  color: #15cfba;
  width: 30%;
  line-height: 20px;
  font-weight: 800;
  font-size: 13px;
  margin-top: 10px;

}

.tableLineB {
  display: flex;
}

// 底层背景
.tableLineB>div {
  color: white;
  width: 100%;
  height: 27.7px;
  line-height: 27.7px;
  font-weight: 400;
  background-color: rgba(109, 255, 212, .1);
  margin: 1px 0;
}

.tableLineB>div:first-child {
  text-align: center;
}

// 小球
.tableNo {
  color: white;
  width: 20px;
  height: 20px;
  line-height: 20px;
  border-radius: 50%;
  margin: 5px 10px;
  border: 1px solid #15cfba;
}

.tableLineC {
  display: flex;
  width: 800px;
}

.tableLineCA {
  display: flex;
  width: 800px;
  color: white;
  animation: 5s totalLine;
}

// 文字样式
.tableLineC>div {
  color: white;

  width: 11.2%;
  height: 27.7px;
  font-size: 12px;
  line-height: 27.7px;
  margin: 2px 0;
}

.tableLineC>div:first-child {
  text-align: center;
}

.scrollText {
  position: absolute;
  top: 0;
}

.tableBody {
  position: relative;
  height: 275px;
  overflow: hidden;
}

@keyframes totalLine {
  0% {
    opacity: 1;
  }

  25% {
    opacity: 0;
  }

  75% {
    opacity: .5;
  }

  100% {
    opacity: 1;
  }
}

// 左一
.get_a_job_box {
  overflow: hidden;
}

// 左二
.cultivate_box {
  overflow: hidden;

  .per-img {
    position: absolute;
    right: 95px;
    top: -142px;
    width: 200px;
  }
}

// 左三
.hot_industry_box {
  overflow: hidden;

}
</style>
